{extend name="common/main"}

{block name="css"}
<!-- 本页面需要额外添加的css请在此处添加 -->
<link rel="stylesheet" href="/mobiled/css/index.css">
<!--新页面需要css-->
<link rel="stylesheet" href="/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="/themes/css/core.css">
<link rel="stylesheet" type="text/css" href="/themes/css/icon.css">
<link rel="stylesheet" type="text/css" href="/themes/css/home.css">
<link rel="stylesheet" type="text/css" href="/themes/css/store.css">
<!--/新页面需要css-->
<script src="/mobiled/js/TouchSlide.1.1.js"></script>
<script src="/mobiled/js/jquery.json.js" type="text/javascript" ></script>
<script src="/mobiled/js/touchslider.dev.js" type="text/javascript" ></script>
<style>
    .v-img{
        border-radius:8px 8px 0 0
    }
    .aui-slide-item-item{
        border-radius:8px;
    }
</style>
{/block}

{block name="body"}
<body>
<!-- 搜索框 -->
<header class="aui-header-default aui-header-fixed" id="header">
    <a href="#" class="aui-header-item">
        <i class="iconfont icon-scan aui-icon-code"></i>
    </a>
    <div class="aui-header-center aui-header-center-clear">
        <div class="aui-header-search-box">
            <i class="iconfont icon-iconfontzhizuobiaozhun22 aui-icon-small-search"></i>
            <input type="text" id="search_text" class="search_text" placeholder="找一找你想要的商品">
        </div>
    </div>
    <a href="#" class="aui-header-item-icon">
        <i class="iconfont icon-xiaoxi aui-icon-member"></i>
    </a>
</header>

<!-- body部分 -->
<div class="aui-content-box">
    <!-- banner -->
    <div class="aui-banner-content aui-fixed-top" data-aui-slider  id="banner">
        <div class="aui-banner-wrapper">
            {volist name='Banner' id='v'}
            <div class="aui-banner-wrapper-item">
                <a href="{$v.ad_link}">
                    <img src="{$v.ad_code}">
                </a>
            </div>
            {/volist}


        </div>
        <div class="aui-banner-pagination"></div>
    </div>
    <!-- 茶品种 -->
    <section class="aui-grid-content">
        <div class="aui-grid-row">
            <!--Comm1-->
            {volist name='Comm1' id='v'}
            <a href="{:url('classify/index')}"  class="aui-grid-row-item">
                <i class="aui-icon-large aui-icon-sign" style=" background-image:url('{$v.image|goods_thum_images2=50,50}'); border-radius: 50%;"></i>
                <p class="aui-grid-row-label">{$v.mobile_name}</p>
            </a>
            {/volist}

        </div>
    </section>
    <!-- 广告位——活动-->
    {notempty name="$huo_dong"}
    <div class="aui-avd-content clearfix">
        {if $hd_count=='1'}
        <a href="{$huo_dong.0.ad_link}" class="content-huodong1">
            <img src="{$huo_dong.0.ad_code}" alt="">
        </a>
        {elseif $hd_count=='2'}
        <a href="{$huo_dong.0.ad_link}" class="content-huodong2">
            <img src="{$huo_dong.0.ad_code}" alt="">
        </a>
        <a href="{$huo_dong.1.ad_link}" class="content-huodong2">
            <img src="{$huo_dong.1.ad_code}" alt="">
        </a>
        {/if}
    </div>
    {/notempty}
    <div class="aui-dri"></div>
    <!-- 精品推荐 -->
    <div class="aui-list-content">
        <div class="aui-list-item aui-list-color">
            <div class="aui-list-item-img">
                <img src="/themes/img/pd/jingpin.png" alt="">
            </div>
            <div class="aui-slide-box">
                <div class="aui-slide-list">
                    <ul class="aui-slide-item-list">
                        {volist name='Recommended' id='v'}

                        <li class="aui-slide-item-item">
                            <a href="{:Url('classify/goodsinfo')}?id={$v.goods_id}" class="v-link">
                                <img class="v-img" src="{$v.goods_id|goods_thum_images=120,120}">
                                <p class="aui-slide-item-title aui-slide-item-f-els">{$v.goods_name}</p>
                                <p class="aui-slide-item-info">
                                    <span class="aui-slide-item-price">¥{$v.market_price}</span>&nbsp;&nbsp;<span class="aui-slide-item-mrk">¥{$v.shop_price}</span>
                                </p>
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <!-- 新品上市 -->
    <div class="aui-list-content">
        <div class="aui-list-item aui-list-color">
            <div class="aui-list-item-img">
                <img src="/themes/img/pd/xinpin.png" alt="">
            </div>
            <div class="aui-slide-box">
                <div class="aui-slide-list">
                    <ul class="aui-slide-item-list">
                        {volist name='Newproducts' id='v'}
                        <li class="aui-slide-item-item">
                            <a href="{:Url('classify/goodsinfo')}?id={$v.goods_id}" class="v-link">
                                <img class="v-img" src="{$v.goods_id|goods_thum_images=120,120}">
                                <p class="aui-slide-item-title aui-slide-item-f-els">{$v.goods_name}</p>
                                <p class="aui-slide-item-info">
                                    <span class="aui-slide-item-price">¥{$v.shop_price} </span>&nbsp;&nbsp;<span class="aui-slide-item-mrk">¥{$v.market_price}</span>
                                </p>
                            </a>
                        </li>
                        {/volist}

                    </ul>
                </div>

            </div>
        </div>

    </div>

    <!--热销商品-->
    <div class="aui-list-content">
        <div class="aui-list-item aui-list-color">
            <div class="aui-list-item-img">
                <img src="/themes/img/pd/rexiao.png" alt="">
            </div>
            <div class="aui-slide-box">
                <div class="aui-slide-list">
                    <ul class="aui-slide-item-list">
                        {volist name='Sellwell' id='v'}
                        <li class="aui-slide-item-item">
                            <a href="{:Url('classify/goodsinfo')}?id={$v.goods_id}" class="v-link">
                                <img class="v-img" src="{$v.goods_id|goods_thum_images=120,120}">
                                <p class="aui-slide-item-title aui-slide-item-f-els">{$v.goods_name}</p>
                                <p class="aui-slide-item-info">
                                    <span class="aui-slide-item-price">¥{$v.shop_price} </span>&nbsp;&nbsp;<span class="aui-slide-item-mrk">¥{$v.market_price}</span>
                                </p>
                            </a>
                        </li>
                        {/volist}

                    </ul>
                </div>

            </div>
        </div>

    </div>
    <div class="aui-dri"></div>
    <div class="aui-recommend">
        <img src="/themes/img/pd/gengduo.png" alt="">
        <!--<h2>为你推荐</h2>-->
    </div>

    <section class="aui-list-product  aui-list-color">
        <div class="aui-list-product-box">
            {volist name='qita' id='v'}

            <a href="{:Url('classify/goodsinfo')}?id={$v.goods_id}" class="aui-list-product-item">
                <div class="aui-list-product-item-img" style="border-radius:8px 8px 0 0">
                    <img  src="{$v.goods_id|goods_thum_images=200,200}"   alt="">
                </div>
                <div class="aui-list-product-item-text  my-recommend-box" style="border-radius:0 0 8px 8px">
                    <div class="recommend-box-text">

                        <h3>{$v.goods_name}</h3>
                    </div>
                    <div class="recommend-box-text">
							<span class="aui-list-product-item-price">
								<span class="recommend-price-title">限时价</span>
								<span class="recommend-price">￥{$v.shop_price}</span>
							</span>
                    </div>
                    <div class="recommend-box-text">
							<span class="aui-list-product-item-del-price recommend-price-true">
								¥{$v.market_price}
							</span>
                        <span class="aui-comment recommend-price-number">销量:{$v.sales_sum}笔</span>
                    </div>
                </div>
            </a>
            {/volist}


        </div>
    </section>
    <div id="search_hide" class="search_hide">
        <h2> <span class="close"><img src="/assets/img/close.png"></span>关键搜索</h2>
        <div id="mallSearch" class="search_mid">
            <div id="search_tips" style="display:none;"></div>
            <ul class="search-type">
                <!--<li  class="cur"  num="0">宝贝</li>-->
                <!--<li  num="1">店铺</li>-->
            </ul>
            <div class="searchdotm">
                <form class="set_ip"name="sourch_form" id="sourch_form" method="post" action="{:Url('Goods/Search')}?q=$('#q').val()">
                    <div class="mallSearch-input">
                        <div id="s-combobox-135">
                            <input class="s-combobox-input" name="q" id="q"  placeholder="请输入关键词"  type="text" value="" />
                        </div>
                        <input type="button" value="" class="buttom"   onclick="if($.trim($('#q').val()) != '') $('#sourch_form').submit();" />
                    </div>
                </form>
            </div>
        </div>

        <!--        <script type="text/javascript">
            $(function() {
                $('#search_text').click(function(){
                    $(".showpage").children('div').hide();
                    $("#search_hide").css('position','fixed').css('top','0px').css('width','100%').css('z-index','999').show();
                })
                $('#get_search_box').click(function(){
                    $(".showpage").children('div').hide();
                    $("#search_hide").css('position','fixed').css('top','0px').css('width','100%').css('z-index','999').show();
                })
                $("#search_hide .close").click(function(){
                    $(".showpage").children('div').show();
                    $("#search_hide").hide();
                })
            });
        </script>
               -->
        <section class="mix_recently_search"><h3>热门搜索</h3>
            <ul>
                {volist name='Search' id='vo' key='k'}
                <li><a href="{:Url('Goods/Search')}?q={$vo}" {if condition="$k eq 1"}class="ht"{/if}>{$vo}</a></li>
                {/volist}
            </ul>
        </section>
    </div>

</div>

{include file="common/bar"}



</body>


{/block}

{block name="js"}
<script type="text/javascript" src="/themes/js/jquery.min.js"></script>
<!-- 本页面需要额外添加的js请在此处添加 -->
<script type="text/javascript" src="/themes/js/aui.js"></script>
<!--<script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>-->
<script>
    // 图片懒加载类
    class LazyLoad {
        constructor(el) {
            this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
            this.init(); // 初始化
        }
        // 判断是否该图片是否可以加载
        canILoad() {
            let imglist = this.imglist;
            for (let i = imglist.length; i--;) {
                // 缩写，相当于if true
                this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
            }
        }
        // 获取图片与窗口的信息
        getBound(el) {
            let bound = el.getBoundingClientRect();
            let clientHeight = window.innerHeight;
            // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
            return bound.top <= clientHeight - 100; // -100是为了看到效果，您也可以去掉
        }
        // 加载图片
        loadImage(el, index) {
            // 获取之前设置好的data-original值
            let src = el.getAttribute('data-original');
            // 赋值到src，从而请求资源
            el.src = src;
            // 避免重复判断，已经确定加载的图片应当从imglist移除
            this.imglist.splice(index, 1);
        }
        // 当浏览器滚动的时候，继续判断
        bindEvent() {
            window.addEventListener('scroll', () => {

                this.imglist.length && this.canILoad();
            });
        }
        // 初始化
        init() {
            this.canILoad();
            this.bindEvent();
        }
    }
    // 实例化对象，参数则是需要使用懒加载的图片类名
    const lazy = new LazyLoad('.lazyload')

</script>
<script type="text/javascript">
    TouchSlide({
        slideCell:"#scrollimg",
        titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell:".bd ul",//要轮播的内容 图片
        effect:"leftLoop",//轮播方向 向左循环滚动
        autoPage:true,//自动分页
        autoPlay:true //自动播放
    });

    // 倒计时
    // function GetRTime2(){
    //     //var text = GetRTime('2016/02/27 17:34:00');
    //     var text119 = GetRTime('2016/05/31 00:00:00');
    //
    //     if (typeof(text119) == "undefined")
    //         $("#surplus_text119").text('活动已结束');
    //     else
    //         $("#surplus_text119").text(text119);var text141 = GetRTime('2019/05/03 00:00:00');
    //
    //     if (typeof(text141) == "undefined")
    //         $("#surplus_text141").text('活动已结束');
    //     else
    //         $("#surplus_text141").text(text141);var text100 = GetRTime('2019/05/27 00:00:00');
    //
    //     if (typeof(text100) == "undefined")
    //         $("#surplus_text100").text('活动已结束');
    //     else
    //         $("#surplus_text100").text(text100);	}
    // setInterval(GetRTime2,1000);


    TouchSlide({
        slideCell:"#scroll_best",
        titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        effect:"leftLoop",
        autoPage:true, //自动分页
        //switchLoad:"_src" //切换加载，真实图片路径为"_src"
    });


    $(function(){
        //$('#J_ItemList').more({'address': url});
        getGoodsList();
    });
    page = 1;
    function getGoodsList(){

        $('.get_more').show();
        $.ajax({
            type : "get",
            url:"{:Url('ajaxGetMore')}",
            data:{
                'p':page
            },
            dataType:'json',
            success: function(data)
            {
                if (data.length == 0){
                    $('.get_more').hide();
                    $('#getmore').remove();
                }else{
                    $.each(data,function (k,v) {
                        $("#J_ItemList>ul").append(v);
                    })
                    page++;
                    $('.get_more').hide();
                }

            }
        });
    }

    function goodsinfo(a) {
        window.open("{:Url('classify/goodsinfo')}?id="+a+"");
    }

    TouchSlide({
        slideCell:"#scroll_new",
        titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        effect:"leftLoop",
        autoPage:true, //自动分页
        //switchLoad:"_src" //切换加载，真实图片路径为"_src"
    });
</script>
<script type="text/javascript">
    TouchSlide({
        slideCell:"#scroll_hot",
        titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        effect:"leftLoop",
        autoPage:true//自动分页
        //switchLoad:"_src" //切换加载，真实图片路径为"_src"
    });
</script>
<script type="text/javascript">
    TouchSlide({
        slideCell:"#index_banner",
        titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell:".bd ul",
        effect:"leftLoop",
        autoPage:true,//自动分页
        autoPlay:true //自动播放
    });
</script>
<script>
    function goTop(){
        $('html,body').animate({'scrollTop':0},600);
    }
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var cart_cn = getCookie('cn');
        if(cart_cn == ''){
            $.ajax({
                type : "GET",
                url:"/index.php?m=Home&c=Cart&a=header_cart_list",//+tab,
                success: function(data){
                    cart_cn = getCookie('cn');
                    $('#cart_quantity').html(cart_cn);
                }
            });
        }
        $('#cart_quantity').html(cart_cn);
    });
</script>
<!-- 微信浏览器 调用微信 分享js-->
<!-- 微信浏览器 调用微信 分享js  end-->
<script type="text/javascript">
    $(function(){
        $('#search_text').click(function(){
            $(".showpage").children('div').hide();
            $("#search_hide").css('position','fixed').css('top','0px').css('width','100%').css('z-index','999').show();
        });
        $('#get_search_box').click(function(){
            $(".showpage").children('div').hide();
            $("#search_hide").css('position','fixed').css('top','0px').css('width','100%').css('z-index','999').show();
        });
        $("#search_hide .close").click(function(){
            $(".showpage").children('div').show();
            $("#search_hide").hide();
        })
    });
</script>
<script>
    $('.search-type li').click(function() {
        $(this).addClass('cur').siblings().removeClass('cur');
        $('#searchtype').val($(this).attr('num'));
    });
    $('#searchtype').val($(this).attr('0'));
</script>

<!--[if lt IE 9]>

<![endif]-->
<!-- 自动适配移动端与pc端 -->
<!--<script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js" charset="utf-8"></script>-->


<!--<script>-->
<!--window.onload = function(){-->
<!--WKIT.init({-->
<!--container: document.getElementById('J_demo'),-->
<!--width: 700,-->
<!--height: 500,-->
<!--uid: '13800138006',-->
<!--appkey: 23466016,-->
<!--credential: '123456',-->
<!--touid: 'xuczg',-->
<!--logo: 'http://img.alicdn.com/tps/i3/TB12LD9IFXXXXb3XpXXSyFWJXXX-82-82.png',-->
<!--pluginUrl: 'http://www.taobao.com/market/seller/openim/plugindemo.php'-->
<!--});-->
<!--}-->
<!--</script>-->


{/block}